<template>
	<view class="user-pages">
		<view class="bg"></view>
		<!-- #ifdef MP -->
		<view class="cu-custom">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }">
				<view class="action mp text-bold">
					<text class="wlIcon-shezhi" style="margin-right: 0.6em" @tap="$wanlshop.auth('/pages/user/setting/setting')"></text>
					<text class="wlIcon-shiyongbangzhu1" @tap="help"></text>
				</view>
				<!-- 背景 -->
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<view class="cu-custom">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }">
				<view class="text-lg" style="color: #fff" @tap="$wanlshop.auth('/pages/user/setting/user')"></view>

				<view class="action">
					<block>
						<text class="wlIcon-erweima" @tap="showModal('share')"></text>
						<text class="margin-right text-sm" @tap="showModal('share')">会员码</text>
					</block>
					<text class="wlIcon-shezhi" style="color: #261332" @tap="$wanlshop.auth('/pages/user/setting/setting')"></text>
					<text class="wlIcon-xiaoxizhongxin" style="color: #261332" @tap="$wanlshop.to('/pages/notice/notice')"></text>
					<view class="cu-tag badge" style="color: #261332" v-if="statistics.notice.notice + statistics.notice.order + statistics.notice.chat > 0">
						{{ statistics.notice.notice + statistics.notice.order + statistics.notice.chat }}
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="wanl-user">
			<view class="user" :style="{ paddingTop: $wanlshop.wanlsys().height + 'px' }">
				<view class="avatar margin-right-bj" @tap="portrai">
					<image class="round" :src="$wanlshop.oss(user.avatar, 62, 62, 2, 'avatar')" mode="aspectFill"></image>
				</view>
				<view class="content" v-if="user.isLogin">
					<view class="text-xxl username" @tap="$wanlshop.auth('/pages/user/setting/user')">{{ user.nickname }}</view>
					<view class="text-sm">
						<view class="cu-tag sm radius bg-white" style="border-radius: 10rpx; color: #b161e4">会员Id:{{ user.id }}</view>
						<!-- <view class="cu-tag sm radius bg-orange">用户积分 {{ user.score }}</view> -->
					</view>
				</view>
				<view class="content" @tap="$wanlshop.auth('/pages/user')" v-else>
					<view class="text-xxl wanl-text-white">登录 / 注册</view>
					<!-- <view class="cu-tag bg-orange sm radius">Hi</view> -->
					<view class="cu-tag wanl-bg-pink sm radius">Hi，欢迎登录</view>
				</view>
			</view>
			<view class="operate" v-if="statistics.activity">
				<view class="text-sm" @tap="$wanlshop.auth('/pages/guanzhu/guanzhu?type=1')">
					<view class="text-bold">{{ statistics.activity.user_follow }}</view>
					我的关注
				</view>
				<view class="text-sm" @tap="$wanlshop.auth('/pages/guanzhu/guanzhu?type=2')">
					<view class="text-bold">{{ statistics.activity.follow_me }}</view>
					关注我的
				</view>
				<view class="text-sm" @tap="$wanlshop.auth('/pages/guanzhu/guanzhu?type=3')">
					<view class="text-bold">{{ statistics.activity.vote }}</view>
					我的投票
				</view>
			</view>
		</view>
		<view class="wanl-user-order padding-sm margin-bj">
			<view class="flex justify-between align-center padding-tb-sm">
				<view class="wddd">我的订单</view>
				<view class="qbdd" @click="$wanlshop.auth('/pages/user/order/order?state=0')">
					全部订单
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="project text-sm">
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=1')">
					<image class="icon-gw" src="../static/images/user/1.png" mode=""></image>
					待支付
					<view class="cu-tag badge bg-orange" v-if="statistics.order.pay > 0">{{ $wanlshop.toFormat(statistics.order.pay, 'hundred') }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=2')">
					<image class="icon-gw" src="../static/images/user/2.png" mode=""></image>
					待发货
					<view class="cu-tag badge bg-orange" v-if="statistics.order.delive > 0">{{ $wanlshop.toFormat(statistics.order.delive, 'hundred') }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=3')">
					<image class="icon-gw" src="../static/images/user/3.png" mode=""></image>
					待收货
					<view class="cu-tag badge bg-orange" v-if="statistics.order.receiving > 0">{{ $wanlshop.toFormat(statistics.order.receiving, 'hundred') }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/order/order?state=4')">
					<image class="icon-gw" src="../static/images/user/4.png" mode=""></image>
					待评价
					<view class="cu-tag badge bg-orange" v-if="statistics.order.evaluate > 0">{{ $wanlshop.toFormat(statistics.order.evaluate, 'hundred') }}</view>
				</view>
				<view @tap="$wanlshop.auth('/pages/user/refund/lists')">
					<image class="icon-gw" src="../static/images/user/5.png" mode=""></image>
					售后
					<view class="cu-tag badge bg-orange" v-if="statistics.order.customer > 0">{{ $wanlshop.toFormat(statistics.order.customer, 'hundred') }}</view>
				</view>
			</view>
			<!-- <view class="logistics margin-top-bj padding-sm" v-if="statistics.logistics.length > 0">
				<swiper vertical autoplay circular disable-touch interval="4000" class="swiper">
					<swiper-item @tap="$wanlshop.auth('/pages/notice/logistics/details')">
						<view class="title">
							<view class="text-sm">最新物流</view>
							<view class="text-sm">18:00</view>
						</view>
						<view class="flex align-center">
							<view class="cu-avatar" :style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 40, 40) + ')' }"></view>
							<view class="content">
								<view class="text-df">
									<text class="wlIcon-paisongtixing"></text>
									派送中
								</view>
								<view class="text-sm">【自提柜】已签收，签收人凭取件码 已取件。</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view> -->
		</view>

		<view class="wanl-user-order padding-sm margin-bj" style="margin-top: 25rpx">
			<view class="flex justify-between align-center padding-tb-sm">
				<view class="wddd">我的资产</view>
				<view class="qbdd" @click="$wanlshop.auth('/pages/user/money/list')">
					账单明细
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>

			<view class="project text-sm bgg">
				<view style="line-height: 1.8" @tap="$wanlshop.auth('/pages/user/coupon/mycard')">
					<view class="bai wanl-pip text-lg text-bold6">{{ statistics.dynamic.coupon }}</view>
					卡券
				</view>
				<view style="line-height: 1.8" @tap="$wanlshop.auth('/pages/user/money/money')">
					<view class="bai wanl-pip text-lg text-bold6">{{ user.money ? user.money : '0.00' }}</view>
					共生豆
				</view>
				<view style="line-height: 1.8" @tap="$wanlshop.auth('/pages/user/bank/bank')">
					<view class="bai wanl-pip text-lg text-bold6">{{ statistics.dynamic.accountbank }}</view>
					银行卡
				</view>
				<view style="line-height: 1.8" @tap="$wanlshop.auth('/pages/gsz/gsz')">
					<view class="bai wanl-pip text-lg text-bold6">{{ user.score || '0' }}</view>
					共生值
				</view>
			</view>
		</view>

		<view class="wanl-user-tool padding-sm margin-lr-bj">
			<view class="flex justify-between align-center padding-tb-sm">
				<view class="wddd">常用功能</view>
			</view>
			<view class="list text-sm grid col-4 wanl-gray-dark">
				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/address/address')">
					<image class="user_icon" src="../static/images/user/gj/1.png" mode=""></image>
					收货地址
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/money/money')">
					<image class="user_icon" src="../static/images/user/gj/2.png" mode=""></image>
					我的钱包
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/apps/find/user')">
					<image class="user_icon" src="../static/images/user/gj/3.png" mode=""></image>
					我的主页
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="getjjr">
					<image class="user_icon" src="../static/images/user/gj/4.png" mode=""></image>
					经纪人
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="help">
					<image class="user_icon" src="../static/images/user/gj/5.png" mode=""></image>
					帮助中心
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/service')">
					<image class="user_icon" src="../static/images/user/gj/6.png" mode=""></image>
					联系客服
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/feedback/lists')">
					<image class="user_icon" src="../static/images/user/gj/7.png" mode=""></image>
					问题反馈
				</view>
				<view class="flex flex-direction align-center justify-around navs-item" @tap="setting">
					<image class="user_icon" src="../static/images/user/gj/8.png" mode=""></image>
					设置
				</view>

				<!-- <view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/lw/lw')">
					<image class="user_icon" src="../static/images/user/liwu.png" mode=""></image>
					我的礼物
					<view class="cu-tag badge bg-orange" v-if="statistics.order.groups > 0">{{ $wanlshop.toFormat(statistics.order.groups, 'hundred') }}</view>
				</view> -->
				<!-- <view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/comment/comment')">
					<image class="user_icon" src="../static/images/user/pinglun.png" mode=""></image>
					评论
				</view> -->

				<!-- <view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/user/complaint/lists')">
					<image class="user_icon" src="../static/images/user/jubao.png" mode=""></image>
					我的举报
				</view> -->

<!-- 				<view class="flex flex-direction align-center justify-around navs-item" @tap="$wanlshop.auth('/pages/shop/live/live')">
					<image class="user_icon" src="../static/images/user/gj/9.png" mode=""></image>
					直播
				</view>
				<view class="flex flex-direction align-center justify-around navs-item">
					<image class="user_icon" src="../static/images/user/gj/10.png" mode=""></image>
					赛区代理
				</view> -->
			</view>
		</view>
		<view class="cu-modal wanl-share" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal()">
			<view v-if="modalName == 'share'" class="cu-dialog" @tap.stop="">
				<wanl-poster ref="wanlPoster" page="pages/index" :scene="{ yqmId: user.id }" @success="posterSuccess" @close="hideModal" @change="hideModal" />
			</view>
		</view>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			modalName: '',
			headerOpacity: 0,
			// 上拉刷新
			reload: true,
			likeData: [],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			}
		};
	},
	computed: {
		...mapState(['user', 'statistics', 'common'])
	},
	onPullDownRefresh() {
		this.loadData();
	},
	onShow() {
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: this.$store.state.common.appStyle.user_font_color == 'light' ? '#ffffff' : '#000000',
				backgroundColor: this.$store.state.common.appStyle.user_nav_color
			});
		}, 200);
	},
	onLoad(query) {
		if (query.hasOwnProperty('scene')) {
			let scene = decodeURIComponent(query.scene);
			scene = this.$wanlshop.getParam(scene);
			console.log('小程序码进入：', scene);
		}
		if (this.$store.state.user.isLogin) {
			this.loadData();
		}
		this.loadlikeData();
	},
	onPageScroll(e) {
		let tmpY = 50;
		e.scrollTop = e.scrollTop > tmpY ? 50 : e.scrollTop; //如果当前高度大于250则250否则当前高度
		this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadlikeData();
		}
	},
	methods: {
		getjjr() {
			this.$wanlshop.auth(`/pages/jingjiren/cg`);
		},
		async loadData() {
			await uni.request({
				url: '/wanlshop/user/refresh',
				method: 'POST',
				success: (res) => {
					this.$store.commit('statistics/edit', res.data.statistics);
					this.$store.commit('user/setUserInfo', res.data.userinfo);
				}
			});
			uni.stopPullDownRefresh();
		},
		// 滚动底部加载猜你喜欢
		async loadlikeData() {
			await uni.request({
				url: '/wanlshop/product/likes?pages=user',
				data: {
					page: this.current_page
				},
				success: (res) => {
					this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data.data); //评论数据 追加
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		},
		// 弹出层
		showModal(name) {
			if (name == 'share') {
				if (this.user.isLogin) {
					this.modalName = name;
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			} else {
				this.modalName = name;
			}
		},
		hideModal() {
			this.modalName = null;
		},
		posterSuccess(e) {},
		// 帮助
		help() {
			this.$wanlshop.to('/pages/user/help');
		},
		// 设置
		setting() {
			this.$wanlshop.to('/pages/user/setting/setting');
		},
		portrai() {
			this.$wanlshop.to('/pages/user/portrait/portrait');
		}
	}
};
</script>

<style lang="scss" scoped>
.avatar {
	// border-radius: 50%;
	padding: 4rpx;
	background: linear-gradient(180deg, rgba(255, 186.67405754327774, 199.8984271287918, 1), rgba(114.0000008046627, 236.00000113248825, 241.00000083446503, 0.5299999713897705));
}
.user-pages {
	position: relative;
	min-height: 100vh;
	background: linear-gradient( 179deg, #EFD8FF 0%, #EBCDFF 22%, #fff 59%, #FFFFFF 100%);
	position: relative;
	z-index: 99;
	.bg {
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		opacity: 0.8;
		background: url('@/static/images/baoming/bg.png');
		filter: blur(120.59rpx);
	}
}
.cu-bar .action.mp:first-child > text[class*='wlIcon-'] {
	margin-left: 0;
}

.wanl-user {
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
}

.wanl-user .user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
}

.wanl-user .user .avatar {
	position: relative;
	height: 123rpx;
	width: 123rpx;
	border-radius: 5000rpx;
	overflow: hidden;
}

.wanl-user .user .avatar image {
	// height: 120rpx;
	height: 100%;
}

.wanl-user .user .avatar .tag {
	position: absolute;
	bottom: 0;
	right: 0;
}

.wanl-user .user .content {
	flex: 1;
}

/* 操作 */
.wanl-user .operate {
	display: flex;
	justify-content: space-around;
	text-align: center;
	line-height: 1.3;
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 1.2rpx;
	color: rgba(105, 94, 139, 1);
}

.wanl-user .operate text {
	display: block;
	font-size: 32rpx;
	font-weight: 900;
	letter-spacing: 1.6rpx;
	line-height: 44.8rpx;
	color: rgba(255, 255, 255, 1);
}
.solid-left::after {
	border-color: rgba(179, 72, 251, 1) !important;
}
/* 活动 */
.wanl-user .activity {
	position: absolute;
	width: 100%;
	bottom: -80rpx;
}

.wanl-user .activity .radius {
	border-radius: 24rpx;
}

.wanl-user .activity .cu-avatar {
	width: 69rpx;
	height: 69rpx;
	margin-right: 30rpx;
	background-color: transparent;
	/* border: 1px solid rgba(255,255,255,.6); */
}

.wanl-user .activity .content {
	text-align: left;
	height: 68rpx;
}

/* 订单 */
.wanl-user-order {
	border-radius: 24rpx;
	border-radius: 10rpx;
	background: #fff;
}

.wanl-user-order .wddd {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #3d3d3d;
	line-height: 42rpx;
	font-style: normal;
	text-transform: none;
}
.wanl-user-order .qbdd {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #979797;
	line-height: 34rpx;
	font-style: normal;
	text-transform: none;
}

.wanl-user-order .title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.wanl-user-order .title text {
}

/* 状态 */
.wanl-user-order .project {
	display: flex;
	justify-content: space-around;
	text-align: center;
}

.wanl-user-order .project > view {
	position: relative;
	flex: 1;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #3d3d3d;
	line-height: 34rpx;
	font-style: normal;
	text-transform: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wanl-user-order .project > view .cu-tag {
	top: -4rpx;
	right: 26rpx;
}

.wanl-user-order .project text {
	display: block;
	font-size: 50rpx;
	margin-bottom: 6rpx;
	color: rgba(186, 80, 250, 1);
}
/* 物流 */
.wanl-user-order .logistics {
	background-color: #f9f9f9;
	border-radius: 24rpx;
}

.wanl-user-order .logistics .swiper {
	height: 120rpx;
}

.wanl-user-order .logistics .swiper .title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
	color: #999999;
}
.bgg {
	border-radius: 10rpx;
	.bai {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #261332 !important;
		line-height: 50rpx;
		font-style: normal;
		text-transform: none;
	}
}
.wanl-user-order .logistics .swiper .cu-avatar {
	margin-right: 10rpx;
	height: 66rpx;
	width: 66rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
}

.wanl-user-order .logistics .swiper .content .text-df {
	color: #3797e0;
	font-size: 27rpx;
	margin-bottom: 2rpx;
}

.wanl-user-order .logistics .swiper .content .text-sm {
	color: #999999;
}

.wanl-user-order .logistics .swiper .content text {
	font-size: 32rpx;
	margin-left: 15rpx;
	margin-right: 10rpx;
}

/* 工具箱 */
.wanl-user-tool {
	border-radius: 24rpx;
	background: #fff;
}

.wanl-user-tool .wddd {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 30rpx;
	color: #3d3d3d;
	line-height: 42rpx;
	font-style: normal;
	text-transform: none;
}
.wanl-user-tool .qbdd {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #979797;
	line-height: 34rpx;
	font-style: normal;
	text-transform: none;
}
.wanl-user-tool .title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.wanl-user-tool .title text {
	margin-left: 2rpx;
}

/* 状态 */
.wanl-user-tool .list {
	text-align: center;
}

.wanl-user-tool .list > view {
	margin-bottom: 28rpx;
	position: relative;
}
.wanl-user-tool .list > view .cu-tag {
	top: -8rpx;
	left: 80rpx;
	right: unset;
}

.wanl-user-tool .list text {
	display: block;
	font-size: 54rpx;
	margin-bottom: 8rpx;
}
.user_icon {
	width: 44rpx;
	height: 44rpx;
}
.navs-item {
	height: 120rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #3d3d3d;
	line-height: 34rpx;
	font-style: normal;
	text-transform: none;
}
.icon-gw {
	margin: 20rpx 0;
	width: 44rpx;
	height: 44rpx;
}
</style>
